<script setup lang="ts">
import { FormCreateItem } from '@/types/form-create';
import { template } from 'lodash-es';
import { NFormItem, NInput, NTooltip } from 'naive-ui';

const props = withDefaults(
	defineProps<{
		item: FormCreateItem;
		formData: Record<string, any>;
	}>(),
	{}
);
</script>

<template>
	<template v-if="item.type === 'custom'">
		<slot :name="item.slot" v-bind="{ formData }" />
	</template>
	<n-input
		v-else-if="item.type === 'n-input'"
		v-model:value="formData[item.field]"
		:placeholder="`请输入${item.title}`"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>
	<n-input-number
		v-else-if="item.type === 'n-input-number'"
		v-model:value="formData[item.field]"
		:placeholder="`请输入${item.title}`"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>
	<n-select
		v-else-if="item.type === 'n-select'"
		v-model:value="formData[item.field]"
		:placeholder="`请输入${item.title}`"
		:options="item.options"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>
	<data-select
		v-else-if="item.type === 'data-select'"
		v-model:value="formData[item.field]"
		:placeholder="`请输入${item.title}`"
		:ucloud-db="item.ucloudDb"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>

	<n-cascader
		v-else-if="item.type === 'n-cascader'"
		v-model:value="formData[item.field]"
		:placeholder="`请输入${item.title}`"
		:options="item.options"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>
	<n-switch
		v-else-if="item.type === 'n-switch'"
		v-model:value="formData[item.field]"
		:placeholder="`请输入${item.title}`"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>
	<n-checkbox-group v-else-if="item.type === 'n-checkbox'" v-model:value="formData[item.field]">
		<n-space item-style="display: flex;">
			<n-checkbox v-for="it in item.options" :value="it.value" :label="it.label" :key="it.value" />
		</n-space>
	</n-checkbox-group>
	<data-checkbox
		v-else-if="item.type === 'data-checkbox'"
		v-model:value="formData[item.field]"
		:ucloud-db="item.ucloudDb"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>
	<n-date-picker
		v-else-if="item.type === 'n-date-picker'"
		v-model:value="formData[item.field]"
		:placeholder="`请输入${item.title}`"
		type="datetimerange"
		format="YYYY-MM-dd"
		:default-time="['00:00:00', '23:59:59']"
		class="w-[300px]"
		:class="item.class"
		:style="item.style"
		v-bind="item.props"
	/>
</template>

<style scoped>
:deep(.n-input-number) {
	width: 100% !important;
}
</style>
